import bannerJpg from "./poster1.jpg";
import logoPng from "../../assets/dengta.png";
import { encodePath } from "@/utils/utils";
export default function draw(ctx, options = {}) {
  console.log(PIXI);
}

export class PosterDraw extends PIXI.Application {
  padding = 24;
  ratio = 2;
  canvasWidth = 0;
  title = "";
  constructor(options = {}) {
    const ratio = options.ratio || 2;
    const padding = options.padding || 24;
    const title = options.title;
    const canvas = document.createElement("canvas");
    const view = canvas.transferControlToOffscreen ? canvas.transferControlToOffscreen() : canvas;
    super({ view, width: 366 * ratio, height: 660, background: "#fff" });
    this.canvasWidth = 366 * ratio;
    this.ratio = ratio;
    this.padding = padding;
    this.logoSrc = options.logoSrc || logoPng;
    this.title = title;
    this.qrUrl = options.qrUrl;
    if (options.selector) {
      canvas.style.width = "100%";
      const loadingDiv = document.createElement("div");
      loadingDiv.style = `width:${100}%;height: 260px;display: flex;justify-content: center;align-items: center;`;
      loadingDiv.innerHTML = "海报绘制中...";
      options.selector.appendChild(loadingDiv);
      this.init().then(() => {
        setTimeout(() => {
          loadingDiv.remove();
          const url = canvas.toDataURL();
          const canvasImg = new Image();
          canvasImg.style.width = "100%";
          canvasImg.src = url;
          options.selector.appendChild(canvasImg);
        }, 500);

        console.log("绘制完成");
      });
    }
  }
  /**
   * 预加载
   */
  async preloading() {
    PIXI.Assets.add("bannerJpg", bannerJpg);
    PIXI.Assets.add("logoJpg", this.logoSrc);
    const erCodeUrl = "https://api.top237.top/ry-api/start/qrcode?msg=" + encodePath(this.qrUrl);
    try {
      const textures = await PIXI.Assets.load(["bannerJpg", "logoJpg"]);
      const erCodeImg = await this.loadImg(erCodeUrl);
      textures["erCodeJpg"] = erCodeImg;
      return textures;
    } catch (error) {
      throw new Error(error);
    }
  }

  async init() {
    try {
      let y = 0;
      const textures = await this.preloading();
      const bannerSprite = PIXI.Sprite.from(textures.bannerJpg);
      const aspectRatio = bannerSprite.width / bannerSprite.height;
      bannerSprite.width = this.canvasWidth;
      bannerSprite.height = this.canvasWidth / aspectRatio;
      y += bannerSprite.height + this.padding;

      const erCodeSprite = PIXI.Sprite.from(textures.erCodeJpg);
      erCodeSprite.anchor.set(0, 0);
      erCodeSprite.x = this.canvasWidth - 160 - this.padding;
      erCodeSprite.y = y;
      erCodeSprite.width = 160;
      erCodeSprite.height = 160;

      y += erCodeSprite.height + this.padding;

      this.stage.addChild(bannerSprite);
      this.stage.addChild(erCodeSprite);

      const basicText = new PIXI.Text("扫描二维码进入歌单", {
        stroke: "#4b5563",
        fill: ["#1f2937"],
        fontWeight: "lighter",
      });
      console.log(basicText.width);
      basicText.x = this.canvasWidth - basicText.width - this.padding;
      erCodeSprite.x = this.canvasWidth - basicText.width - this.padding + (basicText.width - 160) / 2;
      basicText.y = y;
      const logoSprite = PIXI.Sprite.from(textures.logoJpg);
      logoSprite.anchor.set(0, 0);
      logoSprite.x = erCodeSprite.x + (erCodeSprite.width - logoSprite.width) / 2;
      logoSprite.y = erCodeSprite.y + (erCodeSprite.height - logoSprite.height) / 2;
      logoSprite.width = 60;
      logoSprite.height = 60;
      this.stage.addChild(logoSprite);
      this.stage.addChild(basicText);

      const shareText = new PIXI.Text("歌单分享", {
        stroke: "#4b5563",
        fill: ["#4b5563"],
        fontSize: 38,
      });
      shareText.x = this.padding;
      shareText.y = erCodeSprite.y + 30;
      this.stage.addChild(shareText);
      let name = this.title.length > 8 ? this.title.slice(0, 7) + "..." : this.title;
      const nameText = new PIXI.Text(name, { fontSize: 48 });
      nameText.x = this.padding;
      nameText.y = shareText.y + shareText.height + this.padding;
      this.stage.addChild(nameText);
    } catch (error) {
      throw new Error(error);
    }
  }

  /**
   * 加载图片
   */
  loadImg(src) {
    return new Promise((resolve, reject) => {
      const erCodeImg = new Image();
      erCodeImg.src = src;
      erCodeImg.onload = () => {
        const texture = PIXI.Texture.from(src);
        resolve(texture);
      };
      erCodeImg.onerror = (err) => {
        reject(err);
      };
    });
  }
}
